<template>
  <div class="layout-page supply-detail">
    <div class="h-132px page-top">
      <div class="w-1328px mx-auto lh-132px fw-700 font-size-36px text-white">
        {{ title }}
      </div>
    </div>
    <div class="layout-page-inner w-1328px">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/supply">供需信息</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <component :is="innerComponent" :data="detail" :loading="loading" />
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { useLoading } from "@/hooks";
import SupplyInner from "./components/supplyDetail.vue";
import DemandInner from "./components/demandDetail.vue";

const route = useRoute();
const { id, type } = route.query;
const title = computed(() => (type === "supply" ? "供给详情" : "需求详情"));
const innerComponent = computed(() =>
    type === "supply" ? SupplyInner : DemandInner
);

const { loading, setLoading } = useLoading();
const detail = ref({});

const $api = inject("$api");
const getDetail = async () => {
  const apiName = type === "supply" ? "getSupplyDetail" : "getDemandDetail";
  setLoading(true);
  try {
    const { data } = await $api.supply[apiName](id);
    detail.value = data;
  } finally {
    setLoading(false);
  }
};
getDetail();
</script>

<style scoped lang="less">
.page-top {
  background: url("/supply-detail-bg.png") no-repeat center;
  background-size: cover;
}
</style>

<style lang="less">
.supply-detail {
  .content-inner {
    font-size: 14px;
    > div {
      line-height: 20px;
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      > label {
        color: #a5a9ad;
      }
      > div {
        color: @text-default;
      }
    }
  }
}
</style>
